<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 头部保持不变 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户列表展示</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/list.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jq-paginator.js"></script>
</head>
<body>
<!-- 页面结构保持不变 -->
<div class="bookContainer">
    <h2>用户管理列表</h2>
    <div class="navbar-justify-between">
        <div>
            <button class="btn btn-outline-info" type="button" onclick="batchDeleteUser()">批量删除</button>
            <button class="btn btn-outline-info" type="button" onclick="location.href='normal_user_add.html'">添加用户</button>
        </div>
    </div>

    <table>
        <thead>
        <tr>
            <td>选择</td>
            <td class="width100">用户ID</td>
            <td>用户名</td>
            <td>密码</td>
            <td>状态</td>
            <td>创建时间</td>
            <td>更新时间</td>
            <td class="width200">操作</td>
        </tr>
        </thead>
        <tbody></tbody>
    </table>

    <div class="demo">
        <ul id="pageContainer" class="pagination justify-content-center"></ul>
    </div>
</div>

<script>
    $(function(){
        getUserList();
    });

    function getUserList() {
        $.ajax({
            url: "/user/getUserInfoList" + location.search,
            type: "GET",
            success: function(result) {
                if(result.status == "FAIL" || result.status == "UNLOGIN"){
                    location.href = "login_test.html";
                    return;
                }

                let finalHtml = "";
                // 修复1：正确的数据路径
                const userList = result.data.bookInfoList;

                userList.forEach(user => {
                    finalHtml += `<tr>
                         <td><input type="checkbox" name="selectUser" value="${user.id}" class="user-select"></td>
                        <td>${user.id}</td>
                        <td>${user.userName}</td>
                        <td>${user.password}</td>
                        <td>${user.deleteStatus}</td>

                        <td>${new Date(user.createTime).toLocaleString()}</td>
                        <td>${new Date(user.updateTime).toLocaleString()}</td>
                        <td>
                            <div class="op">
                                <button type="button" class="btn btn-primary btn-sm" onclick="location.href='normal_user_update.html?userId=${user.id}'">修改密码</button>
                                <button type="button" class="btn btn-primary btn-sm" href="javascript:void(0)" onclick="deleteUser(${user.id})">删除</button>
                            </div>
                        </td>
                    </tr>`;
                });

                $("tbody").html(finalHtml);

                // 正确的分页参数路径
                $("#pageContainer").jqPaginator({
                    totalCounts: result.data.total,         // 从data.total获取
                    pageSize: result.data.pageRequest.pageSize,      // 从data.pageRequest获取
                    visiblePages: 5,
                    currentPage: result.data.pageRequest.currentPage, // 从data.pageRequest获取
                    first: '<li class="page-item"><a class="page-link">首页</a></li>',
                    prev: '<li class="page-item"><a class="page-link">上一页</a></li>',
                    next: '<li class="page-item"><a class="page-link">下一页</a></li>',
                    last: '<li class="page-item"><a class="page-link">最后一页</a></li>',
                    page: '<li class="page-item"><a class="page-link">{{page}}</a></li>',
                    onPageChange: function (page, type) {
                        if(type=="change"){
                            location.href="normal_user_list.html?currentPage="+page;
                        }
                    }
                });
            }
        });
    }

    // 以下函数保持不变
    function deleteUser(id) {
        if(confirm("确认删除用户？")) {
            $.ajax({
                type: "POST",
                url: "/user/updateUserStatus",
                data: {
                    id: id,
                },
                success: function(result) {
                    if(result.status == "SUCCESS"){
                        alert("删除成功！")
                        location.reload();
                    }
                }
            });
        }
    }

    function batchDeleteUser() {
        const ids = [];
        $("input[name='selectUser']:checked").each(function() {
            ids.push($(this).val());
        });

        if(ids.length && confirm("确认批量删除？")) {
            $.ajax({
                type: "post",
                url: "/user/updateBatchUserStatus?idList="+ids,
                // data: {
                //     idList: ids
                // },
                success: function(result) {

                    if(result.status == "SUCCESS"){
                        location.reload();
                        alert("批量删除成功！")
                    }else{
                        alert("批量删除失败！")
                    }
                },
                error: function() {
                    alert("访问失败，请稍后重试");
                }

            });
        }
    }
</script>
</body>
</html>